<template>
  <div class="tables-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>表管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleRefresh">
              <el-icon><Refresh /></el-icon>刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table 
        :data="tableList" 
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="name" label="表名">
          <template #default="{ row }">
            <el-link type="primary" @click="handleViewData(row)">{{ row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" size="small" @click="handleViewStructure(row)">
                <el-icon><View /></el-icon>
              </el-button>
              <el-button type="success" size="small" @click="handleViewData(row)">
                <el-icon><DataLine /></el-icon>
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无表数据" />
        </template>
      </el-table>
    </el-card>

    <!-- 表数据对话框 -->
    <el-dialog
      v-model="dataDialogVisible"
      :title="'表数据 - ' + currentTable"
      width="90%"
      :fullscreen="true"
    >
      <el-table 
        :data="tableData" 
        style="width: 100%"
        v-loading="dataLoading"
        height="calc(100vh - 200px)"
      >
        <el-table-column 
          v-for="column in tableColumns" 
          :key="column"
          :prop="column"
          :label="column"
        />
      </el-table>
    </el-dialog>

    <!-- 表结构对话框 -->
    <el-dialog
      v-model="structureDialogVisible"
      :title="'表结构 - ' + currentTable"
      width="800px"
    >
      <el-table 
        :data="structureList" 
        style="width: 100%"
        v-loading="structureLoading"
      >
        <el-table-column prop="columnName" label="列名" width="150" />
        <el-table-column prop="dataType" label="数据类型" width="120" />
        <el-table-column prop="isNullable" label="是否可空" width="100" />
        <el-table-column prop="columnKey" label="键类型" width="100" />
        <el-table-column prop="columnComment" label="注释" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import {
  Refresh,
  View,
  DataLine
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const tableList = ref([])
const structureDialogVisible = ref(false)
const structureLoading = ref(false)
const structureList = ref([])
const currentTable = ref('')

// 表数据相关
const dataDialogVisible = ref(false)
const dataLoading = ref(false)
const tableData = ref([])
const tableColumns = ref([])

// 获取表列表
const fetchTableList = async () => {
  if (!route.query.connectionId) {
    ElMessage.warning('未选择数据库连接')
    return
  }

  loading.value = true
  try {
    const response = await axios.post('/api/connection/table', {
      id: route.query.connectionId
    })
    
    if (response.data.code === '200') {
      tableList.value = response.data.data.map(name => ({ name }))
    } else {
      ElMessage.error(response.data.message || '获取表列表失败')
    }
  } catch (error) {
    console.error('获取表列表失败:', error)
    ElMessage.error(error.response?.data?.message || '获取表列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 查看表数据
const handleViewData = async (row) => {
  router.push({
    path: '/database/table-data',
    query: {
      connectionId: route.query.connectionId,
      tableName: row.name
    }
  })
}

// 查看表结构
const handleViewStructure = async (row) => {
  // TODO: 实现查看表结构功能
  ElMessage.info('查看表结构功能开发中...')
}

const handleRefresh = () => {
  fetchTableList()
}

// 页面加载时获取表列表
onMounted(() => {
  fetchTableList()
})
</script>

<style scoped>
.tables-container {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-actions {
  display: flex;
  gap: 12px;
}

:deep(.el-card) {
  width: 100%;
  height: 100%;
}

:deep(.el-table) {
  width: 100% !important;
}

:deep(.el-dialog__body) {
  padding: 0 20px 20px;
}
</style> 